<template>
  <div class="outer-input" :style="{width:`${width}%`}">
    <div class="input-title">
        <span class="need" v-if="struc?.must">*</span>
        <span class="label-name">{{ struc?.viewName }}</span>
    </div>
    <div class="input-contextPackage">
      <div class="input-wrapper">
        <div class="wrapper-item" v-for="(p, index) of phoneList" :key="index">

          <el-input
            class="input-1"
            v-model="p.phone"
            :placeholder="struc?.hint"
            @blur="out"
            :maxlength="struc?.length"
            :disabled="Boolean(!valueInput.canUpdate)"
          ></el-input>
          <el-select class="select-4" v-model="p.phoneToCustomerType" filterable placeholder="请选择">
            <el-option
              v-for="item in optionsList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
          <div class="eidt-icon" v-if="p.isAdd" @click="handleAdd">
            <el-icon><plus /></el-icon>
          </div>
          <div class="eidt-icon" v-else @click="handleMinus(index)">
            <el-icon><minus /></el-icon>
          </div>
        </div>
      </div>
      <span class="errorhint" v-if="showError">{{
        struc?.errorHit
      }}</span>
    </div>
  </div>
</template>

<script lang="ts">
import { Minus, Plus } from '@element-plus/icons-vue'
import { defineComponent, onMounted, PropType, ref, reactive, computed, watchEffect, watch } from "vue";
import useDataCheck, { DataStruc } from "../../hook/datastruc";
import { Option } from "../../types/index"
import useRequest from '../../hook/request';
import { ElMessage } from 'element-plus';

type PhoneType = {
  phone: string,
  phoneToCustomerType: string | number,
  isAdd?: boolean
}
export default defineComponent({
  components: {
    Minus,
    Plus
  },
  type: 107,
  name: "Phone",
  props: {
    struc: {
      type: Object as PropType<DataStruc>,
    },
    passWidth: {
			type: Number
		}
  },
  setup: (props, context) => {
    let showError = ref(false);
    let valueInput: DataStruc = reactive(props.struc as DataStruc);
    const dataCheck = useDataCheck();
    let check = () => {
      if(props.struc?.must) {
        if (valueInput.value && valueInput.value[0].phone) {
          showError.value = false;
        } else {
          console.debug("检查出错：", showError);
          props.struc.errorHit = `请输入${props.struc.viewName}`
          showError.value = true;
        }
      }
      
      return !showError.value;
    };

  watch(() => props.struc?.value, (newV) => {
    console.log(newV)
  }, {immediate: true})

  onMounted(async() => {
    console.log('phone MOuted执行', valueInput.value)
    phoneList.value = [{
      isAdd: true,
      phone: '',
      phoneToCustomerType: '',
    }]
    await getOptionList()
    

    if(valueInput.value.length > 0) {
      valueInput.value.forEach((i:PhoneType) => {
        i.isAdd = false
        valueInput.value[0].isAdd = true;
        
      })
      phoneList.value = valueInput.value

      

      if(phoneList.value.length > 0) {
        console.log('看看进来了', phoneList.value[0].phoneToCustomerType)
        Number(phoneList.value[0].phoneToCustomerType) ? phoneList.value[0].phoneToCustomerType=phoneList.value[0].phoneToCustomerType : phoneList.value[0].phoneToCustomerType = optionsList.value[0] && optionsList.value[0].id
      }

      console.log(phoneList.value)
      
      
    } else {
      

      valueInput.value = phoneList.value
      console.log('进来了', valueInput.value)
      if(valueInput.value.length > 0) {
        console.log('看看进来了111', Number(valueInput.value[0].phoneToCustomerType), optionsList.value)
        Number(valueInput.value[0].phoneToCustomerType) ? valueInput.value[0].phoneToCustomerType = valueInput.value[0].phoneToCustomerType : valueInput.value[0].phoneToCustomerType = optionsList.value[0] && optionsList.value[0].id
      }
    }
      
      dataCheck.addDataCheck(check);
    });

    const phoneList = ref<PhoneType[]>([])
    

    const optionsList = ref<Option[]>([])

    const getOptionList = async() => {
      let result:any = await useRequest(`${props.struc?.dataSource}`, {}, 'GET')
      optionsList.value = result.data || [];
      
      
    }
    const handleTips = (item: PhoneType) => {
      return item.phone && item.phoneToCustomerType
    }
    const handleAdd = () => {
      let tips = phoneList.value.every(handleTips)
      if(tips) {
        phoneList.value.push({
          phone: '',
          phoneToCustomerType: '',
          isAdd: false,
        })

        valueInput.value = phoneList.value
      } else {
        ElMessage.warning('号码好像没有输入哦,请选择联系人')
      }
      
    }

    const handleMinus = (index: number) => {
      phoneList.value.splice(index, 1)
    }
    const width = computed(() => props.passWidth)

    const out = () => {
      if(!valueInput.must) {
					showError.value = false;
				} else {
					check()
				}
    }

    return { 
      showError, 
      check, 
      valueInput, 
      width,
      out,

      phoneList,
      optionsList,
      handleAdd,
      handleMinus,
      };
  },
});
</script>

<style scoped lang="scss">
@import '@style/extend';
.outer-input {
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
  padding-right: 10px;
  box-sizing: border-box;
  .input-title {
    padding-bottom: 10px;
    color: $regularText;
    .need {
      color: red;
    }
    .label-name {
      font-size: $fontSize-1
    }
  
  }

  .input-contextPackage {
      display: flex;

      .input-wrapper {
        display: flex;
        flex-direction: column;

        .wrapper-item {
          display: flex;
          padding: 5px;
        }

        .input-1 {
          flex: 1;
        }
      }
      
      .eidt-icon {
        display: flex;
        width: 30px;
        height: 30px;
        margin-left: 8px;
        border-radius: 4px;
        box-shadow: 0 2px 8px #e0e0e0;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
      }

      .eidt-icon:active {
        transform: scale(.8)
      }
    .errorhint {
      @extend .error;
      height: 10px;
      display: block;
      line-height: 1;
    }
  }
}
</style>
